<template>
    <div class="poa">
        <div class="top" @click="back">
            <span class="el-icon-close"></span>
        </div>
        <div v-if="flag" class="title">
            账号密码登录
        </div>
        <div v-else class="title">
            手机验证码登录
        </div>
        <div v-if="flag">
            <div class="form">
                <div class="phone">
                    <form_input :text="'昵称/手机号/邮箱'" />
                </div>
                <div class="phone">
                    <div class="input">
                        <form_input :text="'请输入密码'" />
                    </div>
                    <div class="last">
                        忘记密码?
                    </div>
                </div>
            </div>
            <submit :text="'登录'" />
        </div>
        <div v-else>
            <div class="form">
                <div class="phone">
                    <div class="six">
                        +86
                    </div>
                    <form_input :value.sync="form.phone" :text="'手机号'" />
                </div>
                <div class="phone">
                    <div class="input">
                        <form_input :value.sync="form.code" :text="'请输入验证码'" />
                    </div>
                    <button v-phone="{ form, yes }" class="last2">
                        获取验证码
                    </button>
                </div>
            </div>
            <submit @yes="submit_login" :form="form" :text="'登录'" />
        </div>
        <div class="tab">
            <div class="tab_left" @click="tab">验证码登录</div>
            <div class="hr"></div>
            <div class="tab_right">登录遇到问题</div>
        </div>
        <div class="qita">
            <div class="hr"></div>
            <div class="text">社交账号登录</div>
            <div class="hr"></div>
        </div>
        <div class="bottom">
            注册即代表同意 《 <span>XXX社区协议</span> 》
        </div>
    </div>
</template>
<script>
import form_input from './common/form_input.vue';
import submit from './common/submit.vue';
export default ({
    components: {
        form_input,
        submit,
    },
    data() {
        return {
            form: {
                phone: '',
                code: '',
            },
            flag: false,
            alert_flag: false,
            title: '',
            right_code: '',
        }
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        submit_login() {
            var zhengze = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!zhengze.test(this.form.phone)) {
                this.$TiShi({ text: '手机号格式错误' })
                return
            }
            if (this.form.code !== this.right_code) {
                this.$TiShi({ text: '验证码错误' })
                return
            }
            this.$http({
                url: 'http://43.138.15.137:8085/api/user/phonelogin',
                method: 'post',
                data: this.form,
            }).then(res => {
                if (res.data.msg == '登录成功') {
                    localStorage.setItem('token', JSON.stringify(res.data.data))
                    this.$router.push('/')
                }
            })
        },
        yes() {
            this.$http({
                url: 'http://43.138.15.137:8085/api/user/sendcode',
                method: 'post',
                data: {
                    phone: this.form.phone
                },
            }).then(res => {
                this.$TiShi({ text: res.data.msg })
                this.right_code = res.data.msg.slice(4)
            }, (err) => {
                this.$TiShi({ text: err.response.data.msg })
            })
        },
        tab() {
            this.flag = !this.flag
        },
    },
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.bottom {
    margin-top: r(35);
    text-align: center;
    color: #6c757d;
    font-size: r(12);

    span {
        color: #007bff;
    }
}

.qita {
    display: flex;
    justify-content: center;
    color: #6c757d;
    margin: r(15) r(8);
    font-size: r(12);
    align-items: center;

    .text {
        margin: 0 r(8);
    }

    .hr {
        width: r(42);
        height: 1px;
        background-color: rgb(221, 221, 221);
    }
}

.tab {
    padding-top: r(7);
    padding-bottom: r(18);
    position: relative;
    font-size: r(12);
    color: #007bff;
    display: flex;
    justify-content: space-between;

    .tab_left {
        width: 45%;
        text-align: right;
    }

    .tab_right {
        width: 45%;
        text-align: left;
    }

    .hr {
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        height: r(16);
        background-color: #6c757d;
        width: 1px;
    }
}

.top {
    height: r(50);

    span {
        display: flex;
        height: 100%;
        width: r(50);
        justify-content: center;
        align-items: center;
        font-size: r(22);
        color: #000;
    }
}

.form {
    padding: 0 r(10);

    .phone {
        display: flex;
        position: relative;
        margin-bottom: r(6);

        .six {
            border-bottom: 1px solid #eee;
            padding: 0 r(12);
            font-size: r(14);
            color: #000;
            display: flex;
            align-items: center;
        }
    }

    .input {
        flex: 1;
    }

    .last {
        font-size: r(14);
        color: #666;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-right: r(10);
    }

    .last2 {
        width: r(72);
        background-color: #FF4A6A;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: r(14);
        color: #fff;
        padding: 0 r(15);
        box-sizing: content-box;
    }
}

.title {
    padding-top: r(67);
    padding-bottom: r(45);
    font-size: r(28);
    color: #333;
    text-align: center;
}
</style>